<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>布局 float</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .thumbnail {
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
            background-color: antiquewhite;
            border: 1px solid;
            position: relative;
        }
        #main{
            position: relative;
        }
    </style>

</head>

<body>
    <div id="main">
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    </div>
        
</body>

</html>